<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <to-do-list></to-do-list>
    </div>

    <script src="./lib/vue3.js"></script>
    <script>
      const { createApp } = Vue;

      // input
      const TodolistForm = {
        data() {
          return {
            textValue: "",
          };
        },
        template: `
          <div>
            <input v-model="textValue" />
            <button @click="add">新增</button>
          </div>
        `,
        methods: {
          add() {
            // console.log(this.textValue);
            this.$emit("get-value", {
              id: new Date().getTime(),
              name: this.textValue,
            });
            this.textValue = "";
          },
        },
      };

      // list
      const TodolistList = {
        props: {
          list: {
            type: Array,
          },
        },
        template: `
          <div>
            <ul>
              <li
                v-for="item in list"
                :key="item.id"
              >
                <input type="checkbox" v-model="item.checked" /> - 
                {{ item.name }} - 
                <button @click="remove(item.id)">del</button>
              </li>  
            </ul>

            <button @click="$emit('remove-some')">批量删除</button>
          </div>
        `,
        methods: {
          remove(id) {
            // console.log(id);
            this.$emit("remove-item", id);
          },
        },
      };

      // 父组件
      const ToDoList = {
        data() {
          return {
            list: [
              {
                id: 1,
                name: "zhangsan",
                checked: false,
              },
              {
                id: 2,
                name: "lisi",
                checked: false,
              },
            ],
          };
        },
        template: `
          <div>
            <h2>todolist</h2>  
            <todolist-form @get-value="getValue"></todolist-form>
            <todolist-list
              :list="list"
              @remove-item="removeItem"
              @remove-some="removeSome"
            ></todolist-list>
          </div>
        `,
        methods: {
          getValue(item) {
            // console.log(item);
            this.list.push(item);
          },
          removeItem(id) {
            // console.log(id);
            this.list = this.list.filter((item) => item.id !== id);
          },
          removeSome() {
            this.list = this.list.filter((item) => !item.checked);
          },
        },
        components: {
          TodolistForm,
          TodolistList,
        },
      };

      createApp({
        data() {
          return {};
        },
        components: {
          ToDoList,
        },
      }).mount("#app");
    </script>
  </body>
</html>
